<template>
  <div class="search">
    <div class="shortcut-info">
      <div class="mode" v-if="cPosition">
        <div class="title">当前位置</div>
        <div class="current-location active" @click="hotCity(cPosition.district)">
          <image src="/static/images/icon/location2.png" class="icon" />
          <div class="city">{{ cPosition.district }}</div>
          <div class="address">{{ cPosition.addr }}</div>
          <span class="i-carbon-arrow-right right-icon"></span>
        </div>
      </div>
      <div class="mode">
        <div class="title">热门城市</div>
        <div class="list">
          <div class="item" v-for="(item, index) in hotList" :key="index" @click="hotCity(item)">
            {{ item }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { getLocation } from '@/utils/index'
defineOptions({ name: 'Search' })

const emits = defineEmits(['hotCity'])

// 热门城市
const hotList = ['成都', '重庆', '北京', '上海', '广州', '深圳', '西安', '贵阳']

function hotCity(name) {
  emits('hotCity', name)
}

// 获取当前位置
const cPosition = ref(null)
getLocation().then((r: any) => {
  http
    .get('/region-addr-app/open/getRegionAddr', {
      lat: r.latitude,
      lng: r.longitude,
    })
    .then((res: any) => {
      if (res) {
        cPosition.value = res
      }
    })
})
</script>
<style lang="scss" scoped>
.search {
  .shortcut-info {
    padding: 40rpx 30rpx;
    .mode {
      .title {
        font-size: 30rpx;
        font-weight: 600;
        line-height: 36rpx;
      }
      .current-location {
        display: flex;
        align-items: center;
        padding: 24rpx;
        margin-top: 20rpx;
        margin-bottom: 56rpx;
        font-size: 27rpx;
        color: var(--color3);
        background-color: #fff;
        border-radius: 60rpx;
        .icon {
          width: 34rpx;
          height: 34rpx;
        }
        .city {
          margin: 0 16rpx 0 8rpx;
          font-weight: 600;
          line-height: 1;
          color: var(--color1);
        }
        .address {
          flex: 1;
          line-height: 1.2;
        }
        .right-icon {
          font-size: 30rpx;
          line-height: 1;
        }
      }

      .list {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-gap: 20rpx;
        margin-top: 30rpx;
        .item {
          height: 58rpx;
          font-size: 23rpx;
          line-height: 58rpx;
          color: var(--color2);
          text-align: center;
          background: #ffffff;
          border-radius: 30rpx;
        }
      }
    }
  }
}
</style>
